<template>
    <div>大量请求时限制并发请求数量</div>
</template>

<script setup>
// import { ref } from 'vue'
import limitedRequest from './index.js'
// import exports from './vueGlobal.js'
// import BigFileService from '../bigFileUpload/api.ts'

const urlsArr = []
for (let i = 1; i <= 100; i++) {
    urlsArr.push(i)
}

// 这个方法是根据请求顺序返回对应结果
limitedRequest(urlsArr, 5).then((res) => {
    console.log(res) 
})


// 这个方法是不关注结果的顺序，只保证同时有n个请求
// const fetchQueue = async () => {
//     console.log("🚀 ~ urlsArr:", urlsArr)
//     while(urlsArr.length > 0) {
//         const url = urlsArr.shift()
//         console.log("🚀 ~ fetchQueue ~ url:", url)
//         await fetchFn() 
//     }
// }

// const fetchFn = async () => {
//     const res = await BigFileService.check({
//         hash: '1231231',
//         total: urlsArr.length
//     })
//     console.log("🚀 ~ fetchFn ~ res:", res)
// }

// let pool = [];
// for(let i = 0; i < 5; i++) {
//     pool.push(fetchQueue())
// }
// console.log("🚀 ~ pool:", pool)

// Promise.all(pool)

// Promise.resolve().then(() => {
//     console.log(0)
//     return Promise.resolve(4)
// }).then((res) => {
//     console.log(res)
// })

// Promise.resolve().then(() => {
//     console.log(1) 
// }).then(() => {
//     console.log(2) 
// }).then(() => {
//     console.log(3)
// }).then(() => {
//     console.log(5)
// }).then(() => {
//     console.log(6) 
// })

// const testRef = exports.ref([1,2,3])
// console.log("🚀 ~ testRef:", testRef)

// const testReactive = exports.reactive([1,2,3])
// console.log("🚀 ~ testReactive:", testReactive)

</script>

<style scoped>
</style>